<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-xs12">
			<div class="layui-card layui-backbox">
				<div class="layui-card-header">发布视频</div>
				<div class="layui-card-body" style="display: flex;">
					<form class="layui-form gform" action="/" lay-filter="teacheraddfilter">
						<input type="hidden" name="tbId" />
						<div class="layui-form-item">
							<label class="layui-form-label">课程标题
							</label>
							<div class="layui-input-inline">
								<input type="text" name="tbTitle" lay-verify="tbTitle" placeholder="请输入课程标题" autocomplete="off" value="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">播课时间
							</label>
							<div class="layui-input-inline">
								<input type="text" class="layui-input" name="tbTime" id="selecttime">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">课程类型</label>
							<div class="layui-input-inline">
								<div class="bqs " id="bqid"></div>
								<div class="bqs " id="bqid2">

								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">课程封面 </label>
							<div class="layui-input-inline">
								<input type="hidden" name="image1" id="image1id" />
								<div class="layui-upload-drag" id="image1file">
									<i class="layui-icon"></i>
									<p>点击上传，或将文件拖拽到此处</p>
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">课程分享图 </label>
							<div class="layui-input-inline">
								<input type="hidden" name="image2" id="image2id" />
								<div class="layui-upload-drag" id="image2file">
									<i class="layui-icon"></i>
									<p>点击上传，或将文件拖拽到此处</p>
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">推荐海报 </label>
							<div class="layui-input-inline">
								<input type="hidden" name="newGuide" id="newGuideid" />
								<div class="layui-upload-drag" id="newGuidefile">
									<i class="layui-icon"></i>
									<p>点击上传，或将文件拖拽到此处</p>
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">五分钟视频 </label>
							<div class="layui-input-inline">
								<input type="hidden" name="trialVideo" id="trialVideoid" />
								<div class="layui-btn" id="trialVideofile">
									上传五分钟视频
								</div>

								<div class="layui-btn  layui-btn-primary" title="1.m3u8" id="trialVideofileyl" style="display: none;" onclick="openplayfn(this.title)">
									预览视频
								</div>
								<!-- 上传完整视频的进度条显示 -->
								<div class="allvideotab" id="wzspboxid1">
									<div class="flexcenterlr">
										<div class="playfilename" id="allfilename1"> </div>
										<span id="Uploadpercentage1" class="jdtclass">0%</span>
									</div>
								<div class="layui-progress layui-progress-big jdtclass" lay-filter="jdt5mindemo" style="margin-top: 10px;"
								 lay-showpercent="yes">
									<div class="layui-progress-bar " lay-percent="30%"></div>
								</div>
								</div>
								<!-- 上传完整视频的进度条显示 end  -->
								
							
							
							</div>

						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">完整视频 </label>

							<div class="layui-input-inline">
								<input type="hidden" name="url" id="urlid" />
								<div class="layui-btn updataallbtn" id="urlfile">
									上传完整视频
								</div>
								<div class="layui-btn  layui-btn-primary " title="1.m3u8" id="urlfileyl" style="display: none;" onclick="openplayfn(this.title)">
									预览视频
								</div>
								<!-- 上传完整视频的进度条显示 -->
								<div class="allvideotab" id="wzspboxid">
									<div class="flexcenterlr">
										<div class="playfilename" id="allfilename"> </div>
										<span id="Uploadpercentage2" class="jdtclass2">0%</span>
									</div>
									<div class="layui-progress layui-progress-big jdtclass2 ">
										<div class="layui-progress-bar " id="jdtwidth" lay-percent="30%"></div>
									</div>
								</div>
								<!-- 上传完整视频的进度条显示 end  -->

							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">课程简介</label>
							<div class="layui-input-inline">
								<textarea id="introductionid" name="introduction" style="display: none;"></textarea>
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">选择讲师</label>
							<div class="layui-input-inline">
								<select name="userId">
									<option value="1">请选择讲师</option>
								</select>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
								<div class="layui-btn layui-btn-primary" id="returnqx">取消</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 脚本 -->
<script type="text/javascript">
	// 进行大文件的上传

	$(".updataallbtn").click(function() {
		uploader.upload();
		$("#wzspboxid").show();

	});


	var GUID = WebUploader.Base.guid(); //一个GUID

	var uploader = WebUploader.create({
		// swf文件路径
		swf: 'http://cdn.staticfile.org/webuploader/0.1.5/Uploader.swf',
		// 文件接收服务端。
		server: 'https://www.honghekq.com/file/bigFile',
		formData: {
			id: GUID
		},
		auto: true,
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick: '#urlfile',
		chunked: true, // 分片处理
		chunkSize: 32 * 1024 * 1024, // 每片32M,
		chunkRetry: false, // 如果失败，则不重试
		threads: 5, // 上传并发数。允许同时最大上传进程数。
		// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		resize: false
	});

	//当文件上传成功时触发。
	uploader.on("uploadSuccess", function(file) {
		$("#allfilename").html(file.name)
		$.ajax({
			url: "https://www.honghekq.com/file/merge",
			cache: false,
			type: 'post',
			dataType: "json",
			async: false,
			data: {
				guid: GUID,
				fileName: file.name
			},
			success: function(result) {
				// uploader.retry($('#urlfile').data('file'));
				if (result.status == 200) {
					$("#urlfile").html('上传完整视频');
					$("#urlid").val(result.data);
					$("#urlfileyl").show();
					$("#urlfileyl").attr('title', result.data);

				}
			}
		});
	});
	//文件上传过程中创建进度条实时显示。
	uploader.on('uploadProgress', function(file, percentage) {
		var jdtnum = parseFloat(percentage * 100).toFixed(2);
		$("#Uploadpercentage2").html(jdtnum + '%');
		$("#jdtwidth").css("width", jdtnum + '%');
	});



	$("#wzspboxid , #wzspboxid1").hide()
	var E = window.wangEditor
	var editor2 = new E('#div3')
	editor2.create()


	layui.use(['element', 'form', 'layedit', 'upload', 'laytpl', 'laydate'], function() {
		var form = layui.form,
			$ = layui.jquery,
			upload = layui.upload,
			laytpl = layui.laytpl,
			layedit = layui.layedit,
			element = layui.element,
			laydate = layui.laydate;
		form.render();
		layedit.set({
			tool: ['strong', 'italic', 'underline', 'del', '|', 'fontFomatt', 'colorpicker', '|', 'left', 'center', 'right',
				'|', 'link', 'unlink'
			]

		});
		var richdemo = layedit.build('introductionid'); //讲师简介
		var router = layui.router(); //获取路由

		laydate.render({
			elem: '#selecttime' //指定元素
		});

		//执行实例


		var upimage1file = upload.render({
			//上传视频封面
			elem: '#image1file',
			url: FileUp,
			acceptMime: 'image/*',
			size: '1024',
			accept: 'images',
			data: {
				fileType: 2
			},
			headers: {
				"ticket": JSON.parse(localStorage.getItem('HH_T')).ticket
			},
			done: function(res) {
				layer.msg(res.data.msg);
				if (res.status == 200) {
					$("#image1id").val(res.data.filePath);
					$("#image1file").html('	<img src="' + IMG_URL + res.data.filePath + '" >');
					layer.msg("上传成功", {
						"icon": 1
					});
				}
			},
			error: function() {
				//请求异常回调
			}
		});

		var upimage2file = upload.render({
			//上传视频分享图
			elem: '#image2file',
			url: FileUp,
			acceptMime: 'image/*',
			size: '1024',
			accept: 'images',
			data: {
				fileType: 23
			},
			headers: {
				"ticket": JSON.parse(localStorage.getItem('HH_T')).ticket
			},
			done: function(res) {
				layer.msg(res.data.msg);
				if (res.status == 200) {
					$("#image2id").val(res.data.filePath);
					$("#image2file").html('	<img src="' + IMG_URL + res.data.filePath + '" >');
					layer.msg("上传成功", {
						"icon": 1
					});
				}
			},
			error: function() {
				//请求异常回调
			}
		});

		var uptrialVideofile = upload.render({
			//上传五分钟视频
			elem: '#trialVideofile',
			url: FileUp,
			acceptMime: 'video/*',
			size: '0',
			accept: 'video',
			data: {
				fileType: 4
			},
			xhr: xhrOnProgress,
			progress: function(value, e) {
				$("#wzspboxid1").show();
				$("#Uploadpercentage1").html(value + '%');
				element.progress('jdt5mindemo', value + '%');
				$("#jdt5min").html('<span class="layui-progress-text" >' + value + '%</span>');
			},
			headers: {
				"ticket": JSON.parse(localStorage.getItem('HH_T')).ticket
			},
			before: function(res) {
				res.preview(function(index, file, result){
					$("#allfilename1").html(file.name)
							    		console.log(file.name);
							    	});
				$("#trialVideofile").html('正在上传');
			},
			done: function(res) {
				$("#trialVideofile").html('点击上传五分钟视频');
				layer.msg(res.data.msg);
				if (res.status == 200) {
					$("#trialVideoid").val(res.data.filePath);
					$("#trialVideofileyl").show();
					$("#trialVideofileyl").attr('title', res.data.filePath);
					layer.msg("上传成功", {
						"icon": 1
					});
				}
			},
			error: function() {
				//请求异常回调
			}
		});


		// var upurlfile = upload.render({
		// 	//上传完整视频
		// 	elem: '#urlfile',
		// 	url: FileUp,
		// 	acceptMime: 'video/*',
		// 	size: '0',
		// 	accept: 'video',
		// 	data: {
		// 		fileType: 3
		// 	},
		// 	headers: {
		// 		"ticket": JSON.parse(localStorage.getItem('HH_T')).ticket
		// 	},
		// 	before: function(res) {
		// 		$("#urlfile").html('正在上传')
		// 	},
		// 	done: function(res) {
		// 		$("#urlfile").html('点击上传五分钟视频')
		// 		layer.msg(res.data.msg);
		// 		if (res.status == 200) {
		// 			$("#urlid").val(res.data.filePath);
		// 			$("#urlfileyl").show();
		// 			$("#urlfileyl").attr('title', res.data.filePath);
		// 			layer.msg("上传成功", {
		// 				"icon": 1
		// 			});
		// 		}
		// 	},
		// 	error: function() {
		// 		//请求异常回调
		// 	}
		// });

		var upnewGuidefile = upload.render({
			//上传推荐海报
			elem: '#newGuidefile',
			url: FileUp,
			acceptMime: 'image/*',
			size: '1024',
			accept: 'images',
			data: {
				fileType: 7
			},
			headers: {
				"ticket": JSON.parse(localStorage.getItem('HH_T')).ticket
			},

			done: function(res) {
				layer.msg(res.data.msg);
				if (res.status == 200) {
					$("#newGuideid").val(res.data.filePath);
					$("#newGuidefile").html('	<img src="' + IMG_URL + res.data.filePath + '" >');
					layer.msg("上传成功", {
						"icon": 1
					});
				}
			},
			error: function() {
				//请求异常回调
			}
		});


		///获取课程类型
		videotypelist = []

		POSTAJAX(VtypeGet, {
			currentPage: 1,
			pageSize: 1000,
			tbName: ''
		}, function(res) {

			$.each(res.data.data, function(idx, obj) {
				obj.ischoose = 2;
				obj.ishave = 2;
				$("#bqid").append('<div class="bq bq2 cupo" id="bq' + obj.tbId + '" data.id="' + obj.tbId +
					'" onclick="videotypechoosefn(' + idx + ')">' + obj.tbProdustsTypeName +
					'</div>');
				videotypelist.push(obj)
			})

		})

		//讲师列表

		POSTAJAX(LecturerGet, {
			currentPage: 1,
			pageSize: 1000,
			search: '',
			tbType: 1
		}, function(res) {
			$.each(res.data.data, function(idx, obj) {

				$("select[name='userId']").append('	<option value="' + obj.tbId + '">' + obj.realName + '</option>');
			})
			form.render();
			form.on('select(teachertypefilter)', function(data) {

			})
		})

		oldtypelist = [];
		if (router.search.tbId) {
			//修改
			// 有id的传参的值  查询 id
			POSTAJAX(VideoGetById2, {
				tbId: router.search.tbId
			}, function(res) {
				setTimeout(function() {
					if (res.data.tbTime != null || res.data.tbTime != '') {
						res.data.tbTime = res.data.tbTime.substring(0, 10)
					}
					form.val("teacheraddfilter", {
						"tbId": res.data.tbId,
						"tbTitle": res.data.title,
						"tbTime": res.data.tbTime,
						"image1": res.data.image1,
						"image2": res.data.image2, //课程分享无
						"trialVideo": res.data.trialVideo, //五分钟视频
						"url": res.data.url, //完整视频
						"newGuide": res.data.newGuide, //推荐海报
						"introduction": res.data.introduction, //
						"userId": res.data.userId,
						// "ids":res.data. // 课程类型 ID
					})
					//处理课程类型
					$.each(res.data.produstsTypes, function(idx, obj) {
						$.each(videotypelist, function(idx1, obj1) {
							console.log(idx)
							if (obj.tbId == obj1.tbId) {
								videotypelist[idx1].ishave = 1;
								videotypechoosefn(idx1);
								console.log(JSON.stringify(videotypelist))
							}
						})
					})
				}, 500);

				$("#image1file").html('	<img src="' + IMG_URL + res.data.image1 + '" >');
				$("#image2file").html('	<img src="' + IMG_URL + res.data.image2 + '" >');

				$("#urlfileyl").show();
				$("#urlfileyl").attr('title', res.data.url);
				$("#trialVideofileyl").show();
				$("#trialVideofileyl").attr('title', res.data.trialVideo);

				$("#newGuidefile").html('	<img src="' + IMG_URL + res.data.newGuide + '" >');
				layedit.setContent(richdemo, res.data.introduction); //课程简介富文本

				laydate.render({
					elem: '#selecttime',
					value: res.data.createTime //必须遵循format参数设定的格式
				});

				$("#upheadimgfile").html('	<img src="' + IMG_URL + res.data.tbHeadPortrait + '" >');

				// layedit.setContent(richdemo, res.data.tbIntroduction);

			})
			console.log(videotypelist)

			//修改
			form.on('submit(formDemo)', function(data) {

				if (layedit.getContent(richdemo) == '') {
					layer.msg("请输入详情内容", {
						"icon": 7
					})
				} else {

					data.field.introduction = layedit.getContent(richdemo)
					var tpostjson = data.field;
					tpostjson.ids = []; //视频类型初始化
					tpostjson.dels = [];
					$.each(videotypelist, function(idx, obj) {
						if (obj.ischoose == 1) {
							//选中的
							if (obj.ishave == 1) {

							} else {
								tpostjson.ids.push(obj.tbId)
							}
						} else {
							///未选中的
							if (obj.ishave == 1) {
								tpostjson.dels.push(obj.tbId)
							} else {

							}
						}
					})

					setTimeout(function() {
						POSTAJAX(VideoMod, tpostjson, function(res) {
							if (res.status == 200) {
								layer.msg("修改成功", {
									"icon": 1
								})
								location.href = '#/video/list';
							} else {
								layer.msg(res.msg, {
									"icon": 2
								})
							}
						})
					}, 1000)
				}
				return false;
			});
		} else {
			// 新增
			//监听提交
			form.on('submit(formDemo)', function(data) {

				if (layedit.getContent(richdemo) == '') {
					layer.msg("请输入详情内容", {
						"icon": 7
					})
				} else {
					data.field.introduction = layedit.getContent(richdemo)
					var tpostjson = data.field;
					tpostjson.ids = []; //视频类型初始化
					$.each(videotypelist, function(idx, obj) {
						if (obj.ischoose == 1) {
							tpostjson.ids.push(obj.tbId)
						}
					})
					POSTAJAX(VideoAdd, tpostjson, function(res) {
						if (res.status == 200) {
							layer.msg("新增成功", {
								"icon": 1
							})
							location.href = '#/video/list';
							richdemo = layedit.build('demo');
							form.render();
						} else {
							layer.msg(res.msg, {
								"icon": 2
							})
						}
					})
				}
				return false;
			});

		}
		$("#returnqx").on("click", function() {
			location.href = '#/video/list';

		})


	});

	function openplayfn(url) {
		console.log(url)
		layer.open({
			type: 2,
			title: '预览',
			shadeClose: true,
			shade: false,
			maxmin: true, //开启最大化最小化按钮
			area: ['893px', '600px'],
			content: 'https://after.honghekq.com/play.html?url=' + encodeURIComponent(url)
		});
	}

	function videotypechoosefn(idx) {
		//视频类型选择函数
		// console.log(idx)
		if (videotypelist[idx].ischoose == 2) {
			videotypelist[idx].ischoose = 1;
			$(".bq").eq(idx).addClass('bqactive')
		} else {
			$(".bq").eq(idx).removeClass('bqactive')
			videotypelist[idx].ischoose = 2;

		}


	}
</script>
<!-- 样式 -->
<style scoped>
	.selecttext {
		-webkit-user-select: text;
		-moz-user-select: text;
		-o-user-select: text;
		user-select: text;
	}

	.playfilename {
		font-size: 17px;
		color: #4e4e4e;
	}

	.allvideotab {

		background: #ffffff;
		border: 1px solid #e6e6e6;
		margin-top: 10px;
		padding: 14px;

	}

	.allvideotab .flexcenterlr {

		margin-bottom: 7px;

	}

	.jdtclass2 {

		font-size: 15px;

	}
</style>
